<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../test/swiper-bundle.css">
    <link rel="stylesheet" href="../图标图标/iconfont.css">
</head>

<body>
    <div class="Top">
        <div class="banxin">
            <ul class="a1">
                <li>欢迎来到丝芙兰</li>
                <a href="./login.html">
                    <li>请登录</li></a>
                </a>
                    <li class="tui">退出</li>

            </ul>
            <ul class="a2">
                <li>我的丝芙兰</li>
                <li>会员俱乐部</li>
                <li>手机丝芙兰</li>
                <li>帮助中心</li>
            </ul>
        </div>
    </div>
    <div class="box">
        <div class="imgs">
            <img src="https://ssl1.sephorastatic.cn/soa/pc/images/sep_top_Logo.png" alt="">
        </div>
        <div class="inp">
            <input type="text">
            <ul class="a1">
                <li>礼盒现实七折</li>
                <li>618热卖狂欢</li>
                <li>丝家划算好物</li>
                <li>经典囤货力存</li>
                <li>人气彩香合辑</li>
                <li>Fresh大牌周</li>
            </ul>
        </div>
        <div class="sousuo">搜索</div>
        <div class="gouwudai">购物袋<span>0</span>件</div>
    </div>
    <div class="info">
        <div class="menu">全部商品类目</div>
        <div class="menu-or">
            <ul class="a2">
                <li>销售榜单</li>
                <li>独家发售</li>
                <li>礼物套装</li>
                <li>全部礼品</li>
                <li>预约中心</li>
            </ul>
        </div>
        <div class="imgs">
            <img src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2018/06/banner/navigation_shopping.png"
                alt="">
        </div>
    </div>
    <div class="box1">
        <ul class="navigation">
            <li class="active">功效
                <p>保湿补水&emsp;底妆修容</p>
                <div>
                    <div class="a1">
                        <div class="b1">功效</div>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>美白
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>底妆修容
                                <p>去角质 卸妆清洁</p>
                            </li>
                            <li>抗老
                                <p>抗污染遮瑕隔离</p>
                            </li>
                            <li>精致
                                <p>淡化细纹 提拉精致</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                    </div>
                    <div class="a2">
                        <img src="https://b-ssl.duitang.com/uploads/item/201812/24/20181224203246_xtbbh.thumb.700_0.jpg"
                            alt="">
                    </div>
                </div>
            </li>
            <li>护肤
                <p>打造天鹅颈&emsp;Yes成分</p>
                <div>
                    <div class="a1">
                        <div class="b1">护肤</div>
                        <ul class="b2">
                            <li>卸妆
                                <p>舒缓保湿 保湿补水</p>
                                <p>卸妆液卸妆乳卸妆油</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                                <p>去角质 卸妆清洁</p>
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>面部护理
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>面膜
                                <p>去角质 卸妆清洁</p>
                                <p>去角质 卸妆清洁</p>
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>眼部护理
                                <p>舒缓保湿 保湿补水</p>
                                <p>套装</p>
                            </li>
                            <li>唇部护理
                                <p>去角质 卸妆清洁</p>
                            </li>
                            <li>
                                颈部护理
                                <p>颈爽</p>
                            </li>
                            <li>
                                优惠套装
                                <p>惠选套装</p>
                            </li>
                        </ul>
                    </div>
                    <div class="a2">
                        <img src="https://b-ssl.duitang.com/uploads/item/201811/13/20181113164843_lwfwc.jpg" alt="">
                    </div>
                </div>
            </li>
            <li>彩妆
                <p>秋日彩妆盘点&emsp;彩妆会选礼盒</p>
                <div>
                    <div class="a1">
                        <div class="b1">彩妆</div>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>美白
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>底妆修容
                                <p>去角质 卸妆清洁</p>
                            </li>
                            <li>抗老
                                <p>抗污染遮瑕隔离</p>
                            </li>
                            <li>精致
                                <p>淡化细纹 提拉精致</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                    </div>
                    <div class="a2">
                        <img src="http://d.ifengimg.com/w600/e0.ifengimg.com/07/2018/1213/4307059B3BFD77EB81867335303872BC3CE04CD4_size233_w640_h960.jpeg"
                            alt="">
                    </div>
                </div>
            </li>
            <li>香水
                <p>秋日馨香盘点&emsp;小众香氛</p>
                <div>
                    <div class="a1">
                        <div class="b1">香水</div>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>美白
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>底妆修容
                                <p>去角质 卸妆清洁</p>
                            </li>
                            <li>抗老
                                <p>抗污染遮瑕隔离</p>
                            </li>
                            <li>精致
                                <p>淡化细纹 提拉精致</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                    </div>
                    <div class="a2">
                        <img src="http://inews.gtimg.com/newsapp_match/0/11992692483/0.jpg" alt="">
                    </div>
                </div>
            </li>
            <li>工具
                <p>美容仪加持美丽&emsp;美妆蛋白套装</p>
                <div>
                    <div class="a1">
                        <div class="b1">工具</div>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>美白
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>底妆修容
                                <p>去角质 卸妆清洁</p>
                            </li>
                            <li>抗老
                                <p>抗污染遮瑕隔离</p>
                            </li>
                            <li>精致
                                <p>淡化细纹 提拉精致</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                    </div>
                    <div class="a2">
                        <img src="https://c-ssl.duitang.com/uploads/item/201901/11/20190111191930_cfcuj.thumb.1000_0.jpg"
                            alt="">
                    </div>
                </div>
            </li>
            <li>男士
                <p>男士赠礼&emsp;水油平衡</p>
                <div>
                    <div class="a1">
                        <div class="b1">男士</div>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>美白
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>底妆修容
                                <p>去角质 卸妆清洁</p>
                            </li>
                            <li>抗老
                                <p>抗污染遮瑕隔离</p>
                            </li>
                            <li>精致
                                <p>淡化细纹 提拉精致</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                    </div>
                    <div class="a2">
                        <img src="https://c-ssl.duitang.com/uploads/item/201901/11/20190111191910_fmsvr.thumb.1000_0.jpg"
                            alt="">
                    </div>
                </div>
            </li>
            <li>洗浴护体
                <p>洗护沐雨&emsp;塑身仟体</p>
                <div>
                    <div class="a1">
                        <div class="b1">洗浴护体</div>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>美白
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>底妆修容
                                <p>去角质 卸妆清洁</p>
                            </li>
                            <li>抗老
                                <p>抗污染遮瑕隔离</p>
                            </li>
                            <li>精致
                                <p>淡化细纹 提拉精致</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                    </div>
                    <div class="a2">
                        <img src="https://c-ssl.duitang.com/uploads/item/201901/11/20190111191914_chqbf.thumb.1000_0.jpg"
                            alt="">
                    </div>
                </div>
            </li>
            <li>美发护发
                <p>换季防脱&emsp;润养秀发</p>
                <div>
                    <div class="a1">
                        <div class="b1">美发护发</div>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>美白
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>底妆修容
                                <p>去角质 卸妆清洁</p>
                            </li>
                            <li>抗老
                                <p>抗污染遮瑕隔离</p>
                            </li>
                            <li>精致
                                <p>淡化细纹 提拉精致</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                    </div>
                    <div class="a2">
                        <img src="https://c-ssl.duitang.com/uploads/item/201901/11/20190111191915_udrbi.thumb.1000_0.jpg"
                            alt="">
                    </div>
                </div>
            </li>
            <li>肤食
                <p>胶原蛋白饮品</p>
                <div>
                    <div class="a1">
                        <div class="b1">肤食</div>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>美白
                                <p>舒缓保湿 保湿补水</p>
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>底妆修容
                                <p>去角质 卸妆清洁</p>
                            </li>
                            <li>抗老
                                <p>抗污染遮瑕隔离</p>
                            </li>
                            <li>精致
                                <p>淡化细纹 提拉精致</p>
                            </li>
                        </ul>
                        <ul class="b2">
                            <li>保湿
                                <p>舒缓保湿 保湿补水</p>
                            </li>
                            <li>清洁
                                <p>去角质 卸妆清洁</p>
                            </li>
                        </ul>
                    </div>
                    <div class="a2">
                        <img src="https://c-ssl.duitang.com/uploads/item/201809/26/20180926131517_odgmd.jpg" alt="">
                    </div>
                </div>
            </li>
        </ul>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img
                        src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/05/banner/hp_youthineye_20210527.jpg"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/06/banner/hp_618mix_20210612.jpg"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/06/banner/hp_fresh_20210617.jpg"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/06/banner/hp_men_20210619.jpg"
                        alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
        <div class="pox">
            <div class="i1">
                <img src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/06/banner/hp_weeklyspecial_20210617.jpg"
                    alt="">
            </div>
            <div class="i1">
                <img src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/06/banner/hp_ptr_20210617.jpg"
                    alt="">
            </div>
            <div class="i1">
                <img src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/06/banner/hp_lancome_20210617.jpg"
                    alt="">
            </div>
        </div>
    </div>
    <div class="box2">
        <div class="a1">
            <div class="s1">
                <img src="https://ssl1.sephorastatic.cn/soa/pc/images/search_logo.png" alt="">
            </div>
            <div class="ipt">
                <input type="text" name="" id="">
            </div>
            <div class="suos">搜索</div>
        </div>
    </div>
    <div class="box3">
        <p class="p1">全部品牌 <span>ALL BRANDS</span></p>
        <ul>
            <li>热门品牌</li>
            <li>独家品牌</li>
            <li>全部品牌</li>
        </ul>
    </div>
    <div class="box4">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img
                        src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/06/banner/hp_superbrand2_20210617.jpg"
                        alt=""></div>
                <div class="swiper-slide"><img
                        src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/06/banner/hp_superbrand1_20210610.jpg"
                        alt=""></div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>

        </div>
        <ul>
            <li>
                <img src="https://ssl1.sephorastatic.cn/wcsfrontend/brand/sephoracollection/sephoracollection_144X60.png"
                    alt="丝芙兰" title="丝芙兰">
                <div></div>
            </li>
            <li><img src="https://ssl1.sephorastatic.cn/wcsfrontend/brand/esteelauder/esteelauder_144X60.png" alt="雅诗兰黛"
                    title="雅诗兰黛">
                <div></div>
            </li>
            <li><img src="https://ssl3.sephorastatic.cn/wcsfrontend/brand/dior/diorV3_144X60.png" alt="Dior"
                    title="Dior">
                <div></div>
            </li>
            <li><img src="https://ssl4.sephorastatic.cn/wcsfrontend/brand/babor/baborV2_144X60.png" alt="芭宝" title="芭宝">
                <div></div>
            </li>
            <li><img src="https://ssl2.sephorastatic.cn/wcsfrontend/brand/lancome/lancome_144X60.png" alt="兰蔻"
                    title="兰蔻">
                <div></div>
            </li>
            <li><img src="https://ssl2.sephorastatic.cn/wcsfrontend/brand/clarins/clarins_144X60.png" alt="娇韵诗"
                    title="娇韵诗">
                <div></div>
            </li>
            <li><img src="https://ssl3.sephorastatic.cn/wcsfrontend/brand/loewe/loewe_144X60.png" alt="罗意威" title="罗意威">
                <div></div>
            </li>
            <li><img src="https://ssl4.sephorastatic.cn/wcsfrontend/brand/inoherbtang/inoherbtang_144X60.png"
                    alt="相宜本草唐" title="相宜本草唐">
                <div></div>
            </li>
            <li><img src="https://ssl1.sephorastatic.cn/wcsfrontend/brand/shiseido/shiseidoV2_144X60.png" alt="资生堂"
                    title="资生堂">
                <div></div>
            </li>
            <li><img src="https://ssl2.sephorastatic.cn/wcsfrontend/brand/guerlain/guerlain_144X60.png" alt="SK-II"
                    title="SK-II">
                <div></div>
            </li>
            <li><img src="https://ssl3.sephorastatic.cn/wcsfrontend/brand/elemis/elemis_144X60.png" alt="艾丽美"
                    title="艾丽美">
                <div></div>
            </li>
            <li><img src="https://ssl4.sephorastatic.cn/wcsfrontend/brand/burberry/burberry_144X60.png" alt="娇兰"
                    title="娇兰">
                <div></div>
            </li>
            <li><img src="https://ssl2.sephorastatic.cn/wcsfrontend/brand/sk-ii/sk-ii_144X60.png" alt="纪梵希" title="纪梵希">
                <div></div>
            </li>
            <li><img src="https://ssl1.sephorastatic.cn/wcsfrontend/brand/givenchy/givenchy_144X60.png"
                    alt="MaisonMargiela" title="MaisonMargiela">
                <div></div>
            </li>
            <li><img src="https://ssl3.sephorastatic.cn/wcsfrontend/brand/maisonmargiela/maisonmargiela_144X60.png"
                    alt="分子乐园" title="分子乐园">
                <div></div>
            </li>
            <li><img src="https://ssl4.sephorastatic.cn/wcsfrontend/brand/facesymbol/facesymbol_144X60.png" alt="博柏利"
                    title="博柏利">
                <div></div>
            </li>
        </ul>
    </div>
    <div class="box5">
        <p class="p1">精品推介 <span>ALL BRANDS</span></p>
    </div>
    <div class="box6">
        <div class="a1">
            <img src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/06/banner/hp_whatsnew_20210618.jpg" alt="">
        </div>
        <div class="a2">
            <img src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/02/banner/hp_beautymaster_20210225.gif" alt="">
        </div>
    </div>
    <div class="box7">
        <p class="p1">商品</p>
    </div>
    <div class="box8">
        <div class="info_list"></div>
        <!-- <div class="info_list"></div>
        <div class="info_list"></div>
        <div class="info_list"></div>
        <div class="info_list"></div>
        <div class="info_list"></div>
        <div class="info_list"></div> -->
           <!-- <div class="a1"><img src="https://ssl2.sephorastatic.cn/products/5/5/8/5/3/6/1_n_10752_280x280.jpg" alt=""></div> 
            <p>swisse</p>
            <p>swisse血成胶原蛋白</p>
            <p>￥288.00</p> -->
        
    </div>
    <div class="box9">
        <ul>
            <li>
               <p class="p1 iconfont icon-daishouhuo-01"></p>
                <p class="p2">顺丰EMS速达</p>
            </li>
            <li>
                <p class="p1 iconfont icon-riqixuanze"></p>
                <p class="p2">丰富礼物</p>
            </li>
            <li>
                <p class="p1 iconfont icon-address"></p>
                <p class="p2">100%官方正品</p>
            </li>
            <li>
                <p class="p1 iconfont icon-yibangding"></p>
                <p class="p2">无障碍退款</p>
            </li>
            <li>
                <p class="p1 iconfont icon-address"></p>
                <p class="p2">安全支付</p>
            </li>
        </ul>
    </div>
    <div class="box10">
        <div class="a1">
            <ul>
                <li>沪公网安备 31010602003121号</li>
                <li>ICP备案序号:沪ICP备05026645号</li>
                <li>食品经营许可证</li>
                <li>网站使用条款</li>
                <li>严正声明</li>
            </ul>
            <p></p>
        </div>
    </div>
    <ul class="box11">
        <li class="top">返回顶部</li>
        <li class="index">跳到主页</li>
        <li class="list">列表主页</li>
    </ul>
    <script src="../test/swiper-bundle.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/index.js"></script>

</body>

</html>